<template>
  <el-container class="official-account-management_user-message">
    <el-main>
      <!-- <el-button class="fixedRight" type="primary" icon="el-icon-sort" size="small" @click="$showHide()" /> -->
      <el-card shadow="never" class="selectCard searchColumn">
        <el-form label-position="right" label-width="5.5rem">
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label="用户：">
                <el-input v-model="params.nickName" placeholder="用户" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="消息类型：">
                <el-select v-model="params.repType" placeholder="消息类型">
                  <el-option label="全部" value="" />
                  <el-option v-for="item in tableOption.column[0].dicData" :key="item.index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <SearchButton :default-params="params" @refreshParams="refreshParams" @getList="getWxMpMsgPageList(page)" />
        </el-form>
      </el-card>
      <el-card shadow="never" class="tableCard">
        <vxe-toolbar :refresh="{query: refreshChange}" />
        <vxe-table
          ref="xTable"
          border
          resizable
          highlight-hover-row
          :auto-resize="true"
          :data="tableData"
          :loading="tableLoading"
          width
          max-height="500"
          :print-config="{}"
        >
          <vxe-table-column width="150" title="消息类型" align="center">
            <template slot-scope="scope">
              <span v-for="item in tableOption.column[0].dicData" v-show="item.value === scope.row.repType" :key="item.index">{{ item.label }}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column width="200" align="center" title="用户">
            <template slot-scope="scope">
              <el-badge :value="scope.row.countMsg" class="count-msg">
                <img class="head-img" :src="scope.row.headimgUrl">
                <div class="nick-name">{{ scope.row.nickName }}</div>

              </el-badge>
            </template>
          </vxe-table-column>
          <vxe-table-column min-width="400" field="repContent" title="接收内容">
            <template slot-scope="scope">
              <div v-if="scope.row.repType == 'event' && scope.row.repEvent == 'subscribe'"><el-tag type="success" size="mini">关注</el-tag></div>
              <div v-if="scope.row.repType == 'event' && scope.row.repEvent == 'unsubscribe'"><el-tag type="danger" size="mini">取消关注</el-tag></div>
              <div v-if="scope.row.repType == 'event' && scope.row.repEvent == 'CLICK'"><el-tag size="mini">点击菜单</el-tag>：【{{ scope.row.repName }}】</div>
              <div v-if="scope.row.repType == 'event' && scope.row.repEvent == 'VIEW'"><el-tag size="mini">点击菜单链接</el-tag>：【{{ scope.row.repUrl }}】</div>
              <div v-if="scope.row.repType == 'event' && scope.row.repEvent == 'scancode_waitmsg'"><el-tag size="mini">扫码结果：</el-tag>：【{{ scope.row.repContent }}】</div>
              <div v-if="scope.row.repType == 'text'">{{ scope.row.repContent }}</div>
              <div v-if="scope.row.repType == 'image'">
                <a target="_blank" :href="scope.row.repUrl"><img :src="scope.row.repUrl" style="width: 100px"></a>
              </div>
              <div v-if="scope.row.repType == 'voice'">
                <WxVoicePlayer :obj-data="scope.row" />
              </div>
              <div v-if="scope.row.repType == 'video'">
                <WxVideoPlayer :obj-data="scope.row" style="margin-top: 40px" />
              </div>
              <div v-if="scope.row.repType == 'shortvideo'">
                <WxVideoPlayer :obj-data="scope.row" style="margin-top: 40px" />
              </div>
              <div v-if="scope.row.repType == 'link'"><el-tag size="mini">链接</el-tag>：<a :href="scope.row.repUrl" target="_blank">{{ scope.row.repName }}</a></div>
            </template>
          </vxe-table-column>
          <vxe-table-column width="200" field="createTime" align="center" title="时间" />
          <vxe-table-column width="100" title="操作" fixed="right" align="center" slots="default">
            <template slot-scope="scope">
              <el-button type="text" size="small" plain @click="gotoMsgDialog(scope.row, scope.index)">查看</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager
          :current-page.sync="page.currentPage"
          :page-size.sync="page.pageSize"
          :total="page.total"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          @page-change="currentChange"
        />
      </el-card>
    </el-main>
    <el-dialog v-if="dialogMsgVisible" title="查看消息" :close-on-click-modal="false" :visible.sync="dialogMsgVisible">
      <WxReplySelect :obj-data="objData" :disabled="true" />
    </el-dialog>
  </el-container>
</template>

<script>
import SearchButton from '@/components/SearchButton'
import { checkVaildWxMp } from '@/api/wxMp'
import { listWxMpMsg, searchWxMpMsg } from '@/api/wxMp'
import WxReplySelect from '@/components/wechat-mp/reply'

import { tableOption } from '@/const/crud/wxmp/wxmsg'
import { checkPermi } from '@/utils/permission'
import WxVideoPlayer from '@/components/wechat-mp/wx-video-play/main.vue'
import WxVoicePlayer from '@/components/wechat-mp/wx-voice-play/main.vue'

export default {
  components: {
    WxReplySelect,
    WxVideoPlayer,
    WxVoicePlayer,
    SearchButton
  },
  data() {
    return {
      objData: {},
      appIdList: [],
      params: {
        appId: '',
        repType: '',
        nickName: ''
      },
      afterParams: {
        appId: '',
        repType: '',
        nickName: ''
      },

      dialogMsgVisible: false,
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      paramsSearch: {},
      tableLoading: false,
      tableOption: tableOption,
      wxUserId: ''
    }
  },
  computed: {
    permissionList() {
      return {
        addBtn: checkPermi(['wxmp:msg:add']),
        delBtn: checkPermi(['wxmp:msg:del']),
        editBtn: checkPermi(['wxmp:msg:edit']),
        viewBtn: checkPermi(['wxmp:msg:get'])
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    refreshParams(params) {
      this.params = params
      this.afterParams = JSON.parse(JSON.stringify(this.params))
      this.getList1()
    },
    init() {
      checkVaildWxMp().then(res => {
        if (res) {
          if (res === undefined) {
            alert('公众号没有授权，请授权后再操作1!')
            this.$router.push(`/wxMp/wxMpAuthorize`)
          } else {
            const objRes = JSON.parse(JSON.stringify(res))
            this.params.appId = objRes.appId
            this.afterParams.appId = objRes.appId
            this.getWxMpMsgPageList(this.page)
          }
        } else {
          alert('公众号没有授权，请授权后再操作2!')
          this.$router.push(`/wxMp/wxMpAuthorize`)
        }
      })
    },
    getList1() {
      this.afterParams = JSON.parse(JSON.stringify(this.params))
      this.getWxMpMsgPageList(this.page)
    },
    gotoMsgDialog(row) {
      searchWxMpMsg({ id: row.id }).then(res => {
        this.objData = res
        this.dialogMsgVisible = true
      })
    },
    getWxMpMsgPageList(page, params) {
      this.tableLoading = true
      const obj = this.params
      listWxMpMsg(Object.assign({ ...{
        current: page.currentPage,
        size: page.pageSize
      }, ...obj }, params, this.paramsSearch)).then(response => {
        this.tableData = response.data.records
        this.page.total = response.data.total
        this.page.currentPage = page.currentPage
        this.page.pageSize = page.pageSize
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    /**
     * 刷新回调
     */
    refreshChange(page) {
      this.getWxMpMsgPageList(this.page)
    },
    currentChange(val) {
      this.page.currentPage = val.currentPage
      this.getWxMpMsgPageList(this.page)
    }
  }
}
</script>

<style lang="scss">
.official-account-management_user-message {
  .head-img{
    width: 50px;
  }
}
</style>
